<template>
  <div>
    <div id="main">
      <div class="wrap">
        <input type="checkbox" name="1" id="item1" />
        <label for="item1">
          <div class="item">
            <div class="content">CIM</div>
            <img src="../../assets/images/devJoin/sanjiao.png" />
            <img class="yes" src="../../assets/images/devJoin/yes.png" />
          </div>
        </label>
      </div>
      <div class="wrap">
        <input type="checkbox" name="1" id="item2" />
        <label for="item2">
          <div class="item">
            <div class="content">一标三十</div>
            <img src="../../assets/images/devJoin/sanjiao.png" />
            <img class="yes" src="../../assets/images/devJoin/yes.png" />
          </div>
        </label>
      </div>
      <div class="wrap">
        <input type="checkbox" name="1" id="item3" @click="getNum" />
        <label for="item3">
          <div class="item">
            <div class="content">编码赋码</div>
            <img src="../../assets/images/devJoin/sanjiao.png" />
            <img class="yes" src="../../assets/images/devJoin/yes.png" />
          </div>
        </label>
      </div>
      <div class="wrap">
        <input type="checkbox" name="1" id="item4" />
        <label for="item4">
          <div class="item">
            <div class="content">其他</div>
            <img src="../../assets/images/devJoin/sanjiao.png" />
            <img class="yes" src="../../assets/images/devJoin/yes.png" />
          </div>
        </label>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "",
  components: {},
  data() {
    return {};
  },
  props: {},
  methods: {
    getNum() {
    },
  },
};
</script>
 
<style lang="scss" scoped>
#main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
label {
  font-weight: 400;
}
.wrap {
  position: relative;
  margin: 10px;
}

.item {
  width: 93px;
  height: 40px;
  //   background-color: #9e9e9e;
  border: 1px solid rgb(210, 219, 229);
  border-radius: 2px;
  position: relative;
  //   box-shadow: 0 0 0 3px #dbe0e3;
  transition: all 0.5s;
  cursor: pointer;
}

.item img {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0px;
  right: 0px;
  opacity: 0;
}
.item .yes {
  width: 10px;
  height: 8px;
  position: absolute;
  top: 0px;
  right: 0px;
  opacity: 0;
}
input[type="radio"],
input[type="checkbox"] {
  display: none;
}

input:checked + label .item {
  //   box-shadow: 0 0 0 3px #00a3ff;
  color: rgb(43, 111, 255);
  border: 1px solid rgb(43, 111, 255);
  border-radius: 2px;
}

input:checked + label .item img {
  opacity: 1;
}

.content {
  font-size: 16px;
  text-align: center;
  line-height: 40px;
}
</style>